<template>
    <div class="app-container">
        <div class="content">
			<div class="navnum">
				<el-steps :active="2" finish-status="end" process-status='curt' class="nextnav"  simple>
				  <el-step title="导入文件" icon="iconfont icon-1" ></el-step>
				  <el-step title="批单校验" icon="iconfont icon-2"></el-step>
				  <el-step title="结算完成" icon="iconfont icon-3"></el-step>
				</el-steps>
			</div>
            <div class="list-all2" clearfix>
                <div class="all-data2">
                    <span>应结合计：<span>{{premium | numFilter}}</span>元，实结合计：<span v-bind:class="{'data-red': premium != actionPremium}">{{actionPremium | numFilter
                    }}</span>元</span>&nbsp;
                </div>
            </div>

            <div class="downenTable">  
             <el-table
                :data="tableData"
                 stripe
                v-loading="loading"
                style="width: 100%">
                <el-table-column  width='60'>
                <template slot-scope='scope'>
                    <span v-if='scope.row.insuranceType == 1' class="edspan1">商</span>
                    <span v-if='scope.row.insuranceType == 2' class="edspan2">交</span>
                </template>
                </el-table-column>
                <el-table-column
                  label="批单信息"
                  >
                  <template slot-scope='scope'>
                        <p class="info-p1">
                            <span class="lineG" @click="toE(scope.row.guaranteeSlipId)" v-if='scope.row.guaranteeSlipNumber'>{{scope.row.guaranteeSlipNumber}}</span>
                            <span v-if='!scope.row.guaranteeSlipNumber'>-</span>
                            <!-- <span v-if='scope.row.insuranceName'>{{scope.row.insuranceName}}</span>
                            <span v-if='!scope.row.insuranceName'>-</span> -->
                        </p>
                        <p class="info-p2">
                            <span v-if='scope.row.plateNumber'>{{scope.row.plateNumber}}</span>
                            <span v-if='!scope.row.plateNumber'>-</span>
                            <!-- <span v-if='scope.row.applicantName.length<=6'>{{scope.row.applicantName}}</span> -->
                            <!-- <el-tooltip v-if='scope.row.applicantName.length>6' class="item" effect="light" :content="scope.row.applicantName" placement="bottom">
                                <span style="cursor: pointer;">{{scope.row.applicantName | sixCon}}</span>
                            </el-tooltip> -->
                            <span v-if='scope.row.customerName'>{{scope.row.customerName | sixCon}}</span>
                            <span v-if='!scope.row.customerName'>-</span>
                        </p>
                        <p class="info-p3">
                            <span>原保单：</span>
                            <span class="lineG" @click='toG(scope.row.guaranteeSlipId)' v-if='scope.row.originGuaranteeSlipNumber'>{{scope.row.originGuaranteeSlipNumber}}</span>
                            <span v-if='!scope.row.originGuaranteeSlipNumber'>-</span>
                        </p>
                    </template>
                </el-table-column>
                 <el-table-column
                  label="业务归属"
                  width="110"
                  align="center"
                  >
                    <template slot-scope='scope'>
                        <el-tooltip  placement="bottom" effect="light">
                            <div slot="content" class='compony_text'>{{scope.row.organizationUnitName}}</div>
                            <span>{{scope.row.organizationUnitName | lastname}}<br> ({{scope.row.salesman}})</span>
                        </el-tooltip>
                       <!-- <span>{{scope.row.organizationUnitName | lastname}}<br> ({{scope.row.salesman}})</span> -->
                       <!-- <span>{{scope.row.salesman}}<span> -->
                   </template>
                </el-table-column>
                   <el-table-column
                  prop="correctPremium"
                  label="批改保费"
                   width="90"
                    align="right"
                  >
                    <template slot-scope='scope'>
                       <span v-if="scope.row.correctPremium !=null">{{scope.row.correctPremium | numFilter}}</span>
                       <span v-else>-</span>
                   </template>
                </el-table-column>
                <el-table-column
                  prop="afterCorrectPremium"
                  label="批改后保费"
                   width="90"
                    align="right"
                  >
                    <template slot-scope='scope'>
                       <span v-if="scope.row.afterCorrectPremium !=null">{{scope.row.afterCorrectPremium | numFilter}}</span>
                       <span v-else>-</span>
                   </template>
                </el-table-column>
                     <el-table-column
                  prop="correntDatetime"
                  label="批单时间"
                   width="100"
                    align="center"
                  >
                   <template slot-scope='scope'>
                       <span v-if="scope.row.correntDatetime !=null">{{scope.row.correntDatetime | timeD}}</span>
                       <span v-else>-</span>
                   </template>
                </el-table-column>
                <el-table-column
                  prop="upperTotle"
                  label="上游结算金额"
                   width="105"
                    align="center"
                  >
                   <template slot-scope='scope'>
                       <span v-if="!scope.row.upperTotle==null">{{scope.row.upperTotle | numFilter}}</span>
                       <span v-else>-</span>
                   </template>
                </el-table-column>
                <el-table-column
                  label="下游政策费用"
                   width="105"
                    align="center"
                  >
                   <template slot-scope='scope'>
                       <span>{{scope.row.total | numFilter}}</span>
                       <span v-if="scope.row.total == null">-</span>
                       <!-- <span v-if="!scope.row.total==null">{{scope.row.total}}</span>
                       <span v-else>-</span> -->
                   </template>
                </el-table-column>
                <el-table-column
                  prop="actionTotal"
                  label="下游实结费用"
                   width="115"
                    align="center"
                  >
                   <template slot-scope="scope">
                       <span v-if="!scope.row.isShow " :class="scope.row.actionTotal == scope.row.total?'':'data-red'">{{ scope.row.actionTotal ==null?'-':scope.row.actionTotal | numFilter}}</span>
                       <!-- <span v-if="!scope.row.isShow && scope.row.actionTotal != scope.row.total" class="data-red">{{ scope.row.actionTotal ==null?'-':scope.row.actionTotal }}</span> -->
                       <span v-if="scope.row.isShow">
                          <el-input v-model="baoFeiLable.baofei" onkeyup="this.value=this.value.replace(/[^\d\.]/g,'') " onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'') " :class="changeColor == true ?'danger':''" size="mini" placeholder="请输入费用"   @focus="returnColor"></el-input>
                        </span>
                  </template>
                </el-table-column>
                 <el-table-column
                  label="是否结算"
                   width="90"
                    align="right"
                  >
                  <template slot-scope='scope'>
                    <span v-if='scope.row.lowerSettleState == 1' style="color:#CF1322;">已结算</span>
                    <el-tooltip v-else :content="scope.row.isSettlement? '可以结算':'暂不结算'" placement="top">
                        <el-switch 
                            v-model="scope.row.isSettlement"
                            active-color="#87D068"
                            inactive-color="#CCCCCC" 
                            @change='switchtoggle(scope.row.id)'
                            >
                        </el-switch>
                    </el-tooltip>
                </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                   width="100"
                    align="right"
                  >
                  <template slot-scope="scope">
        
                        <span  class="switch-btn" v-if="!scope.row.isShow&&scope.row.lowerSettleState != 1"  @click="changeType(scope.row,1)">编辑</span>
                         <!-- <span class="edit-btn" v-if="!scope.row.isShow"  @click="saveVal(scope.row,scope.row.organizationUnitId,2)">删除</span> -->

                         <span  class="switch-btn" v-if="scope.row.isShow"  @click="saveVal(scope.row)">保存</span>
                         <span class="edit-btn" v-if="scope.row.isShow" @click="deleteVal(scope.row)">取消</span>
                  </template>
                </el-table-column>
              </el-table>
           </div>
            <div  class='page-right'>
                <el-pagination @current-change="handleCurrentChange" :current-page.sync='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="count" class='util-page' size='mini'></el-pagination>
            <!-- @current-change="handleCurrentChange" -->
            </div>

            <div class="down-btn">
				<el-button size='small' class='wd100' @click='toupstep()'>上一步</el-button>
				<el-button size='small' type='primary' class='wd100' @click='tosettle()' v-if="btnShow">结算</el-button>
				<el-dialog title="确认" :visible.sync="dialogVisible" width='500px' :close-on-click-modal='false'>
				  <p style="text-align: left;margin-top:0;">请确认以下结算信息是否正确：</p>
				  <table class="settletable" border="1" cellpadding="6" cellspacing="0">
				  	<tr>
				  		<td width="25%"></td>
				  		<td width="25%">条数</td>
				  		<td width="25%">应结金额</td>
				  		<td width="25%">实结金额</td>
				  	</tr>
				  	<tr>
				  		<td style="text-align:left;">共搜索保单</td>
				  		<td>{{settleTableData.totalCount}}</td>
				  		<td>{{settleTableData.totalCost | numFilter}}</td>
				  		<td>{{settleTableData.aTotalCost | numFilter}}</td>
				  	</tr>
				  	<tr class="setB">
				  		<td style="text-align:left;">本次结算保单</td>
				  		<td>{{settleTableData.salesmanCount}}</td>
				  		<td>{{settleTableData.salesmanTotalCost | numFilter}}</td>
				  		<td>{{settleTableData.salesmanATotalCost | numFilter}}</td>
				  	</tr>
				  	<!-- <tr>
				  		<td style="text-align:left;">暂未结算保单</td>
				  		<td>{{settleTableData.notSalesmanCount}}</td>
				  		<td>{{settleTableData.notSalesmanTotalCost | numFilter}}</td>
				  		<td>{{settleTableData.notSalesmanActionTotalCost | numFilter}}</td>
				  	</tr> -->
				  </table>
				  <div>
					  <el-button size='mini' class='wd120' @click='dialogVisible = false'>暂不结算</el-button>
					  <el-button size='mini' type='primary' class='wd120' @click='upsettle()'>正确，马上结算</el-button>
				  </div>
				</el-dialog>
			</div>
        </div>
    </div>
</template>
<script>
import Vue from'vue'
export default {
    data(){
        return{
            btnShow:true,
            tableData:[
            ],
            bianjiType:false,
            dialogVisible:false,
            currentPage:1,
            pagetotal:10,
            settleTableData:[
            ],
            count:'',//总条数
            premium:'',//应借金额
            actionPremium:'',//实结金额
            changeColor:false,
            loading:false,
        }
    },
    filters:{
			numFilter(val) {
		    // 截取当前数据到小数点后两位
		    // let realVal = Number(val).toFixed(2)
		    // num.toFixed(2)获取的是字符串
		    // return Number(realVal)
		    if(val || val == 0){
		    	val = val.toString().replace(/\$|\,/g,'');
			    if(isNaN(val)) {
			      val = "0";  
			    }
			    let sign = (val == (val = Math.abs(val)));
			    val = Math.floor(val*100+0.50000000001);
			    let cents = val%100;
			    val = Math.floor(val/100).toString();
			    if(cents<10) {
			       cents = "0" + cents
			    }
			    for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
			        val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
			    }

			    return (((sign)?'':'-') + val + '.' + cents);
		    }
          },
           
		  lastname(val) { 
		       let  index = val.lastIndexOf('-')
		       if(index !== '-1'){
                 let sli = val.substr(index+1,val.length)
                 let sli2 = sli.replace(/\(.*?\)/g,'')
		         return sli2
		       }
		    },
		  sixCon(val){
		  	let aa = val;
		  	if(val.length > 6){
		  		aa = val.substr(0,6)+'...';
		  	}
		  	return aa;
          },
          timeD(val){
            	let aa = val;
		  	if(val.length > 10){
		  		aa = val.substr(0,10);
		  	}
		  	return aa;
          },
          keepTwoNum:function(val){
            val = Number(val)
            return val.toFixed(2)
            }
          
        },
        
    mounted(){
        if(this.$route.query.id){
				this.id = this.$route.query.id;
				this.signBeginDate = this.$route.query.signBeginDate;
				this.signEndDate = this.$route.query.signEndDate;
				this.organizationUnitId = this.$route.query.organizationUnitId;
				// this.salesman = this.$route.query.salesman;
				this.staffId = this.$route.query.staffId;
				this.insuranceType = this.$route.query.insuranceType;
                this.insuranceId = this.$route.query.insuranceId;
                this.currentPage = this.$route.query.pageIndex;
            }
            this.getList(this.currentPage)
    },
    methods:{

        // 表格信息
			getList(pageindex){
				const _this = this;
				_this.loading = true;
				let params = {};
				if(pageindex){
					params = {
						pageIndex : pageindex,
						batchId:_this.id,
					}
				}else{
					params = {
						batchId:_this.id,
					}
				}
				this.post(params,'services/app/correctGuaranteeSlip/GetLowerCorrectGuaranteeSlipsByPage').then(rs => {
					if(rs.success){
                        _this.loading = false;
                        console.log("asndnas---------")
                        console.log(rs);
                        
						if(rs.result.count == 0){
							this.btnShow = false;
						}else{
							this.btnShow = true;
                        }
                        console.log('sajdjasdj____')
                        
                        this.tableData = rs.result.items;
                        console.log(this.tableData)
						this.pagetotal= rs.result.totalCount;
                        this.count= rs.result.count;
                        // this.yingjie = rs.result.totalMoney;
                        // this.shijie = rs.result.actionTotalMoney;
						// this.salesmanCount = rs.result.salesmanCount  ;//结算
						// this.notSalesmanCount = rs.result.notSalesmanCount  ; //暂不
						this.premium = rs.result.totalMoney  ; //保费
						this.actionPremium = rs.result.actionTotalMoney ; //实结保费
						// this.expands = [];
					}
				})
            },
            //结算开关
            switchtoggle(id){
                console.log(this.id)
                let params = {
                    id : id,
                    batchId:this.id,
                }
                this.post(params,'services/app/correctGuaranteeSlip/UpdateLowerGuaranteeSlipState').then(rs => {
                    if (rs.success) {
                        this.getList(this.currentPage)
                    }else{
                        this.$message.error('修改状态失败')  
                    }
                })
            },
            //改变页码
             handleCurrentChange(val){
		    	 console.log(`每页 ${val} 条`);
                 this.currentPage = val;
                 this.$router.push({
                    name: "downendorsement2",
                    query: {
                        id: this.id,
                        signBeginDate:this.signBeginDate,
                        signEndDate:this.signEndDate,
                        organizationUnitId:this.organizationUnitId,
                        // salesman:this.formData.salesman,
                        staffId:this.staffId,
                        insuranceType:this.insuranceType,
                        insuranceId:this.insuranceId,
                        pageIndex:this.currentPage
                    }
                })
		    	//  this.getList(val)
		    },
        changeType(val) {
            console.log(val)
            if(this.bianjiType){
                this.changeColorClass()
                return
            }else{
                if(val.actionTotal == null){
                    var taNum = ''
                }else if(val.actionTotal == 0){
                    var taNum = '0'
                }else{
                    var taNum = val.actionTotal
                }
                this.baoFeiLable = Object.assign({},{},{
                    baofei:taNum,
                })
                Vue.set(val,'isShow',true)
                this.bianjiType = true
            }
            
        },
        saveVal(val){
            var twoVal = this.baoFeiLable.baofei
            var ab = Number(twoVal).toFixed(2)
            if(val.total == null || ab >= val.total){
                 let params = {
                    actionTotal:ab,
                    id : val.id,
                    batchId:this.id,
                }
                this.post(params,'services/app/correctGuaranteeSlip/UpdateLowerGuaranteeSlipActionTotal').then(rs => {
                    if (rs.success) {
                        this.$message({
                            showClose: true,
                            message: '修改实结费用成功',
                            type: 'success'
                        });
                        this.deleteVal(val)
                        this.getList(this.currentPage)
                         this.changeColor = false;
                    }else{
                         this.changeColor = true;
                        this.$message.error(rs.error.message)  
                    }
                })
            }else if(ab < val.total){
                this.changeColor = true;
                 this.$message.error('下游实结费用应大于等于政策费用')  
                return
            }
           
        },
        changeColorClass(){
            this.changeColor = true;
                this.$message.error('请先保存下游实结费用')  
            },
        returnColor(){
            this.changeColor = false;
            },
         deleteVal(val){
            if(this.bianjiType){
                this.bianjiType = false
                this.changeColor = false;
            }
            Vue.set(val,'isShow',false)
        },
        toupstep(){
            const _this = this;
            this.$confirm('返回上一步，该页面的操作将会重置，确定要返回上一步？').then(() => {
                _this.$router.push({
                    name:'downendorsement1'
                })
            })
        },
        tosettle(){
            this.dialogVisible = true;
            let params = {
		    		id :this.id
		    	}
		    	this.post(params,'services/app/correctGuaranteeSlip/GetLowerGuaranteeSlipTempStat').then(rs =>{
		    		if(rs.success){
		    			this.settleTableData = rs.result;
		    		}
		    	})
        },
        upsettle(){

            this.dialogVisible = false;
		    	let params = {
		    		batchId :this.id
		    	}
		    	this.post(params,'services/app/correctGuaranteeSlip/CorrectGuaranteeSlipLowerSettlement').then(rs =>{
		    		if(rs.success){
		    			console.log(rs.result);
				    	this.$router.push({
                            name: "downendorsement3",
                            query: {
                                id:this.id
                            }
                        })
		    		}else{
		    			this.$notify.error({
				          title: '错误',
				          message: rs.error.message,
				          customClass:"el-notification-error"
				        });
		    		}
		    	})
            
        },
        //保单详情
        toE(id){
             this.$router.push({
                name:'endorsementDetail',
                params:{
                    id:id
                }
            })
        },
       toG(id){
            console.log(id)
            this.$router.push({
                name:'policydetail',
                params:{
                    id:id
                }
            })
        },
    }
}
</script>
<style  lang="scss" scoped>
.setB{margin-bottom:12px;}
.navnum{margin-top: 55px;padding: 0 20px;margin-bottom: 50px;}
.el-steps--simple{padding: 17px 8%;}
.el-form{
	.form_top{
		width:500px;
		margin: 0 auto;
	}
	.input_wp{
		margin-bottom: 12px;
		.fontsize12{font-size: 12px;}
	}
	.modeP,.modeP_txt{display: inline-block;}
	.modeP_txt{margin-left: 106px;color: #CF1322;;margin-top: -6px;margin-bottom: 0;}
	.wd300{width: 300px;}
	.hei28{height: 28px;line-height: 28px;padding: 0;margin: 0;color: #666;
		letter-spacing: 0;font-size: 12px;
		.acolor{color: #027dca;}
		.acolor:hover{text-decoration: underline;}
		.iconColor{color: #FF9430;cursor: pointer;}
	}
	.uploadTxt{display: inline-block;position: relative;top: -10px;margin-left: 20px;color: #666666;font-size: 13px;}
	.floatLeft{float: left;display: block;}
	.submitBtn{margin: 0 auto;margin-left: -100px;}
	.btn-item{margin-top: 100px;margin-bottom: 246px !important;text-align: center;}
	.el-form-item{margin-bottom: 14px !important;}
	
	.typeWp{margin-top: 28px;}
	
	
}
.upsettle-form1{padding-bottom: 100px;}
.data-red{
    color:#CF1322 !important;
}
//样式
.list-all2{
    //height:56px;
   box-sizing:border-box;
    padding:0 20px 14px 20px;
    .all-data2{
       // float:right;
        color:#666666;
     //   display:inline-block;
        line-height:28px;
        text-align: right;
        span{
            font-size:13px;
            .data-red{
                color:#CF1322;
            }
        }
    }
}
.page-right{
        width: 100%;
        text-align: right;
        margin-top: 50px;
        padding: 0 20px;
    }
.downenTable{
    padding: 0 20px;
    .info-p1{
        font-size:13px;
        color:#333;
        line-height:18px;
        margin:0 0 3px 0;
        span:first-child{
            display:inline-block;
            min-width:190px;
        }
    }
    .info-p2{
        font-size:13px;
        color:#666;
        margin:3px 0 0 0;
        line-height:18px;
        display:inline-block;
        span:first-child{
            display:inline-block;
            min-width:100px;
        }
    }
    .info-p3{
            margin: 3px 0 0 0
    }
    .edspan1{
        display:inline-block;
        width:25px;
        height:25px;
        background:#39B96C;
        border-radius:6px;
        color:#fff;
        font-size:14px;
        text-align:center;
    }
    .edspan2{
        display:inline-block;
        width:25px;
        height:25px;
        background:#3C8CBD;
        border-radius:6px;
        color:#fff;
        font-size:14px;
        text-align:center;
    }
    .switch-btn {
        color: #027dca;
        margin-right: 10px;
        cursor: pointer;
    }
    .edit-btn {
        color: #027dca;
        cursor: pointer;
    }
}
.lineG{
	color:#027DCA !important;
	cursor:pointer;
	min-width: 200px;
}
.down-btn{
    text-align:center;
    margin-bottom:50px;
}
.settletable{
    border:1px solid #efefef;
    text-align:right;
    width:100%;
    margin-bottom:20px;
    .setB{
        font-weight:700;
    }
    td{
        border:1px solid #efefef;
    }
}
</style>
<style type="text/css">
	.el-step__head.is-curt,.el-step__title.is-curt{color: #c0c4cc;}
	.upsettle-form1 .ats-tree .el-input__inner{width: 300px !important;}
	.upsettle-form1 .ats-tree .ats-tree-scrollbar{min-width: 300px;}
	.form_top .el-form-item__error{margin-top: -10px !important;}
</style>